
<script setup>
import {
    Edit,
    Delete,
ElementPlus
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import * as admin from '@/api/admin.js'
import {ElMessageBox} from 'element-plus'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { Plus } from '@element-plus/icons-vue'

import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();
import { ElMessage } from 'element-plus';

const currentPage = ref(1)//当前页
const total = ref(0)//总条数
const pageSize = ref(10)//每页条数

const dialogVisible = ref(false)  // 弹出框
const visibleDrawer = ref(false)  // 抽屉


const search_name = ref('') // 检索

//列表数据模型
const articles = ref([])


const woryTypeList = ref([])

// 添加模型
const addModel = ref({
    typeName: '',
    contet: '',
})
// 修改模型
const updateModel = ref({
    id: '',
    typeName: '',
    contet: ''
})

const typeList = async () => {
    const param = {
        currentPage: '1'
    }
    const res = await admin.finRepairtype(param)
    woryTypeList.value = res.data
    console.log(woryTypeList.value)
}

// 修改模型赋值
const showDialog = (row) => {
    updateModel.value.typeName = row.typeName;
    updateModel.value.id = row.id;
    updateModel.value.contet = row.contet;
}

const formatDate = (date) => {
    if (!date) {
      return '';
    }
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0'); 
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const articleList = async () => {
    let param = {
        currentPage: currentPage.value,
        typeName: search_name.value
    }
    const res = await admin.finRepairtype(param)
    articles.value = res.data
}

const updateJinqu = async () => {
    const res = await admin.updateRepairtype(updateModel.value)
    if(res.code == 0){
        ElMessage.success(res.msg? res.msg:'修改成功');
        articleList()
        // dialogVisible
        // visibleDrawer
        dialogVisible.value = false
    }
}

const addArticle = async () => {
    const res = await admin.addRepairtype(addModel.value)
    if(res.code == 0){
        ElMessage.success(res.msg? res.msg:'添加成功');
        articleList()
        // dialogVisible
        // visibleDrawer
        visibleDrawer = false
    }
}   



const delData = (row) => {
    ElMessageBox.confirm(
    '你确认要删除该种类信息吗?',
    '温馨提示',
    {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(async () => {
        try {
            // 调用接口
            const result = await admin.delgonggao({id:row.id});
            if (result) {  // 假设 result 为删除成功的标志
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                articleList();
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败',
                });
            }
        } catch (error) {
            // console.error('删除操作失败:', error);
            ElMessage({
                type: 'error',
                message: '删除失败，请稍后再试。',
            });
        }
    })
    .catch(() => {
        console.log('取消删除');
        ElMessage({
            type: 'info',
            message: '取消删除',
        });
    });
}


//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    currentPage.value = num
    articleList()
}

articleList()
typeList()

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>维修种类管理</span>
                <el-button type="primary" @click="visibleDrawer = true">添加维修种类</el-button>
            </div>
        </template>

        <el-form inline>
            <el-form-item label="维修种类：">
                <!-- <el-select placeholder="请选择" v-model="categoryId">
                    <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
                    </el-option>
                </el-select> -->
                <el-input v-model="search_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="articleList">搜索</el-button>
                <el-button @click="search_name = '';">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="articles" style="width: 100%">
            <el-table-column label="维修种类" prop="typeName"></el-table-column>
            <el-table-column label="维修描述" prop="contet"></el-table-column>
            <el-table-column label="创建时间" prop="createdAt"> 
                <template #default="{ row }">
                    {{ formatDate(row.createdAt) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click = "dialogVisible = true;showDialog(row)"></el-button>
                    <!-- <el-button :icon="Delete" circle plain type="danger" @click = "delData(row)"></el-button> -->
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="onCurrentChange"
            layout="prev, pager, next, jumper">
          </el-pagination>
    </el-card>


    <el-drawer v-model="visibleDrawer" title="添加种类" direction="rtl" size="50%">
        <!-- 添加文章表单 -->
        <el-form :model="addModel" label-width="100px">
            <el-form-item label="种类名称">
                <el-input v-model="addModel.typeName" placeholder="请输入种类名称"></el-input>
            </el-form-item>
            <el-form-item label="种类描述">
                <el-input v-model="addModel.contet" placeholder="请输入种类描述"></el-input>
            </el-form-item>
            <!-- <el-form-item label="景点图片">
                <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
                action="http://localhost:8080/upload/image"
                name="file"
                :headers="{'Authorization':tokenStore.token}"
                :on-success="uploadSuccess"
                >
                    <img v-if="addModel.img" :src="addModel.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item> -->
            <!-- <el-form-item label="选择公告类型">
                <el-select v-model="addModel.status" placeholder="请选择类型">
                    <el-option label="社区公告" value="社区公告"></el-option>
                    <el-option label="维修通知" value="维修通知"></el-option>
                    <el-option label="安全提醒" value="安全提醒"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="addArticle('添加工人')">添加</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>

    <el-dialog v-model="dialogVisible" title="修改信息" width="30%">
        <el-form :model="updateModel" :rules="rules" label-width="100px" style="padding-right: 30px">
            <el-form-item label="维修种类" prop="TypeName">
                <el-input v-model="updateModel.typeName" minlength="1" maxlength="10"></el-input>
            </el-form-item>
            
            <el-form-item label="维修描述" prop="content">
                <el-input v-model="updateModel.contet" minlength="1" maxlength="15"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateJinqu()"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

</style>